<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body {
      font-family: "Helvetica", "Arial", serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }

    h1 {
      color: #333;
      background-color: transparent;
    }

    a {
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }

    ul {
      padding: 0;
    }

    li {
      float: left;
      padding: 1em;
      list-style: none;
    }

    #imagegallery a {
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline;
    }

    #imagegallery a img {
      border: 0;
    }
  </style>
</head>

<body>
  <h2>
    美女画廊
  </h2>

  <div id="imagegallery">
      <img src="../img/QQ图片20230124180315.jpg" width="100px" alt="美女1" id="img1"/>
      <img src="../img/QQ图片20230124180319.jpg" width="100px" alt="美女2" id="img2"/>
      <img src="../img/QQ图片20230124180322.jpg" width="100px" alt="美女3" id="img3"/>
      <img src="../img/QQ图片20230124180326.jpg" width="100px" alt="美女4" id="img4"/>
  </div>
  <div style="clear:both"></div>

  <img id="image" src="../img/QQ图片20230124180315.jpg" alt="" width="450px" />

  <p id="des">选择一个图片</p>
  <script>
    var img1 = document.getElementById("img1");
    var img2 = document.getElementById("img2");
    var img3 = document.getElementById("img3");
    var img4 = document.getElementById("img4");
    var imgn = document.getElementById("image");
    var p1 = document.getElementById("des");
    var lin =  0;
    function iamges(lin) {
      switch (lin) {
        case img1.onclick:
        imgn.src = "../img/QQ图片20230124180319.jpg"
        p1.value = "美女1"
          break;
          case img2.onclick:
        imgn.src = "../img/QQ图片20230124180319.jpg"
        p1.value = "美女2"
          break;
          case img3.onclick:
        imgn.src = "../img/QQ图片20230124180322.jpg"
        p1.value = "美女3"
          break;
          case img4.onclick:
        imgn.src = "../img/QQ图片20230124180326.jpg"
        p1.value = "美女4"
          break;
          default:
            console.dir(lin);
      }
    }
    var iamges1 = function () {
      imgn.src = "../img/QQ图片20230124180319.jpg"
        p1.value = "美女1"
    }
    var iamges2 = function () {
      imgn.src = "../img/QQ图片20230124180319.jpg"
        p1.value = "美女1"
    }
    var iamges3 = function () {
      imgn.src = "../img/QQ图片20230124180319.jpg"
        p1.value = "美女1"
    }
    var iamges41 = function () {
      imgn.src = "../img/QQ图片20230124180319.jpg"
        p1.value = "美女1"
    }
    img1.onclick = iamges
    img2.onclick = iamges
    img3.onclick = iamges
    img4.onclick = iamges

    // switch (key) {
    //   case value:
        
    //     break;
    
    //   default:
    //     break;
    // }
  </script>
</body>

</html>